<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<!-- -->
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.slidepanel.setup.js"></script>
<script type="text/javascript" src="scripts/jquery.transit.js"></script>
<script type="text/javascript" src="scripts/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#rusername").tooltip({
      position: "center right",
      offset: [-3, 15],
      effect: "fade",
      opacity: 0.7
    });
	$("#rpassword").tooltip({
      position: "center right",
      offset: [-3, 15],
      effect: "fade",
      opacity: 0.7
    });
	$("#rconfigpassword").tooltip({
      position: "center right",
      offset: [-3, 15],
      effect: "fade",
      opacity: 0.7
    });
	$("#remail").tooltip({
      position: "center right",
      offset: [-3, 15],
      effect: "fade",
      opacity: 0.7
    });
	$("#rcellphone").tooltip({
      position: "center right",
      offset: [-3, 15],
      effect: "fade",
      opacity: 0.7
    });
});
</script>
<script type="text/javascript">
var xmlhttp;
function changeClass(id){
	var x=document.getElementById(id)
	if(x.className=="rsubmit")
		x.className='rreset'
	else
		x.className='rsubmit'
}
function checkEnable() {
	var username = document.getElementById("usernameyes").style.display
	var pwd = document.getElementById("pwdyes").style.display
	var cfgpwd = document.getElementById("cfgpwdyes").style.display
	var cellphone = document.getElementById("cellphoneyes").style.display
	var btn = document.getElementById("submitbtn")
	if (username=="block" && pwd=="block" && cfgpwd=="block" && cellphone=="block") {
		btn.className = "enable"
		btn.href="javascript:submitForm()"
	} else {
		btn.className = "disable"
		btn.href=null;
	}
}
function callback(){
	if (xmlhttp.readyState==4 && xmlhttp.status==200)
	{
		var result=xmlhttp.responseText;
		var x=document.getElementById("remindusername");
		var y=document.getElementById("rusername");
		if(y.value!=null && y.value!="" && (result=="" || result==null)){
			document.getElementById("usernameyes").style.display="block"
			x.style.display="none"
		}
		else{
			document.getElementById("usernameno").style.display="block"
			if(result!="" && result!=null){
				x.style.display="block"
				x.innerHTML="用户名已存在，请重新输入！"
			}
		}	
		checkEnable()
	}
}
function isPassword() {
	var x=document.getElementById("rpassword")
	if(x.value.length<8){
		document.getElementById("pwdno").style.display="block"
		var z=document.getElementById('remindpassword')
		z.innerHTML="密码不可小于8位！"
		z.style.display="block"
	} else {
		document.getElementById("pwdyes").style.display="block"
	}
	checkEnable()
}
function isEmail() {
	var x=document.getElementById("remail")
	if(!RegExp("([0-9A-Za-z_-])+.?([0-9A-Za-z])*@([0-9A-Za-z])+.(com|cn|org)").test(x.value)){
		document.getElementById("emailno").style.display="block"
		var z=document.getElementById('remindemail')
		z.innerHTML="请输入正确的 E-Mail 地址！"
		z.style.display="block"
	} else {
		document.getElementById("emailyes").style.display="block"
	}
	checkEnable()
}
function isCellphone() {
	var x=document.getElementById("rcellphone")
	if(x.value.length!=11 || RegExp("\\D").test(x.value)){
		document.getElementById("cellphoneno").style.display="block"
		var z=document.getElementById('remindcellphone')
		z.innerHTML="请输入正确的手机号码！"
		z.style.display="block"
	} else {
		document.getElementById("cellphoneyes").style.display="block"
	}
	checkEnable()
}
function configPassword(){
	var x=document.getElementById("rpassword")
	var y=document.getElementById("rconfigpassword")
	var a=document.getElementById("remindconfigpassword")
	if(x.value == "" || x.value == null) {
		document.getElementById("cfgpwdno").style.display="block"
		a.innerHTML="请先输入密码！"
		a.style.display="block"
	}
	else if(x.value == y.value){
		yes = document.getElementById("cfgpwdyes")
		yes.style.display="block"
	} else {
		document.getElementById("cfgpwdno").style.display="block"
		a.innerHTML="两次密码输入不一致！"
		a.style.display="block"
	}
	checkEnable()
}
function hiddenTips(id){
	var x=document.getElementById(id)
	if(id == "remindusername"){
		no = document.getElementById("usernameno")
		no.style.display="none"
		yes = document.getElementById("usernameyes")
		yes.style.display="none"
	}
	else if(id=="remindpassword"){
		no = document.getElementById("pwdno")
		no.style.display="none"
		yes = document.getElementById("pwdyes")
		yes.style.display="none"
	}
	else if(id=="remindconfigpassword"){
		no = document.getElementById("cfgpwdno")
		no.style.display="none"
		yes = document.getElementById("cfgpwdyes")
		yes.style.display="none"
	}
	else if(id=="remindemail"){
		no = document.getElementById("emailno")
		no.style.display="none"
		yes = document.getElementById("emailyes")
		yes.style.display="none"
	}
	else if(id=="remindcellphone"){
		no = document.getElementById("cellphoneno")
		no.style.display="none"
		yes = document.getElementById("cellphoneyes")
		yes.style.display="none"
	}
	x.style.display="none"
}
function isValid(id,txt){
	var no=document.getElementById("usernameno")
	var yes=document.getElementById("usernameyes")
	no.style.display="none"
	yes.style.display="none"
	var x=document.getElementById(id)
	var y=document.getElementById(txt)
	if(y.value == "" || y.value == null){
		x.innerHTML="请输入用户名！"
		no.style.display="block"
		x.style.display="block"
	}
	else if(RegExp("\\D|\\W").test(y.value)) {
		x.innerHTML="用户名不能含有非法字符！"
		no.style.display="block"
		x.style.display="block"
	}
	else {
		if (window.XMLHttpRequest)
		{
			xmlhttp=new XMLHttpRequest();
		} else {
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.open("GET","checkusername.do?q="+y.value,true);
		xmlhttp.onreadystatechange=callback;
		xmlhttp.send(null);
	}
	checkEnable()
}
function submitForm() {
	f = document.getElementById("signupform")
	f.submit()
}
</script>
<title>漂书系统</title>
</head>

<body>
	<!-- 登录部分 -->
	<div class="wrapper col0">
		<div id="topbar">
			<div id="slidepanel">
				<div class="topbox"></div>
				<div class="topbox last">
					<h2>登录面板</h2>
					<form action="loginAction" method="post">
						<fieldset>
							<legend>Login Form</legend>
							<label for="username">用户名: <input type="text"
								name="username" id="username" value="" />
							</label> <label for="password">密码: <input type="password"
								name="password" id="password" value="" />
							</label> <label for="remember"> <input class="checkbox"
								type="checkbox" name="remember" id="remember" checked="checked" />
								记住登录信息
							</label> <input type="submit" name="login" id="login" value="登录" />
							&nbsp; <input type="reset" name="reset" id="reset" value="重置" />
							</p>
						</fieldset>
					</form>
				</div>
				<br class="clear" />
			</div>
			<div id="loginpanel">
				<ul>
					<li class="left">登录面板 &raquo;</li>
					<li class="right" id="toggle"><a id="slideit"
						href="#slidepanel">打开面板</a><a id="closeit" style="display: none;"
						href="#slidepanel">关闭面板</a></li>
				</ul>
			</div>
			<br class="clear" />
		</div>
	</div>
	<!--
########################################################################################## -->
	<div class="wrapper col1">
		<div id="header">
			<div id="logo">
				<a href="#"><img id="logoimg" src="images/logo_slat.jpg" /></a>
				<!--<p>漂书系统</p>-->
			</div>
			<div id="topnav">
				<ul>
					<li class="active"><a href="#">首页</a></li>
					<li><a href="#">漂书</a></li>
					<li><a href="#">搜索</a></li>
					<li class="last"><a href="#">捐书</a></li>
				</ul>
			</div>
			<br class="clear" />
		</div>
	</div>
	<!--
########################################################################################## -->
	<div class="wrapper col2"></div>
	<div id="homecontent">
		<div class="signupinfo">
			<h1>注册新用户</h1>
			<img id="ll" src="images/1346392670_sign-up.png" />
			<form id="signupform" method="post" action="signUp">
				<ul>
					<li><span class="spanlabel"><span class="STYLE1">*</span>请输入用户名:</span>
						<input type="text" id="rusername" name="user.username"
						onClick="hiddenTips('remindusername')"
						onBlur="isValid('remindusername','rusername')"
						title="用户名必须是英文、中文或数字，长度不得超过20位" /> <img src="images/pass.png"
						id="usernameyes" /> <img src="images/wrong.png" id="usernameno" />
						<span id="remindusername" class="tips">用户名已存在，请重新输入！</span></li>
					<li><span class="spanlabel"><span class="STYLE1">*</span>请输入密码：</span>
						<input type="password" id="rpassword" name="user.password"
						onClick="hiddenTips('remindpassword')" onblur="isPassword()"
						title="8~20位字母或数字，不要用过于简单的口令" /> <img src="images/pass.png"
						id="pwdyes" /> <img src="images/wrong.png" id="pwdno" /> <span
						id="remindpassword" class="tips">用户名已存在，请重新输入！</span></li>
					<li><span class="spanlabel"><span class="STYLE1">*</span>请确认密码：</span>
						<input type="password" id="rconfigpassword" name="configpassword"
						onClick="hiddenTips('remindconfigpassword')"
						onblur="configPassword()" title="请再次确认您的密码" /> <img
						src="images/pass.png" id="cfgpwdyes" /> <img
						src="images/wrong.png" id="cfgpwdno" /> <span
						id="remindconfigpassword" class="tips">用户名已存在，请重新输入！</span></li>
					<li><span class="spanlabel"><span class="STYLE1">&nbsp;</span>请输入邮箱地址：</span>
						<input type="text" id="remail" name="user.email"
						class="rtextfield" onClick="hiddenTips('remindemail')"
						onblur="isEmail()" title="请输入您的常用邮箱，以确保我们能够联系到您" /> <img
						src="images/pass.png" id="emailyes" /> <img
						src="images/wrong.png" id="emailno" /> <span id="remindemail"
						class="tips">用户名已存在，请重新输入！</span></li>
					<li><span class="spanlabel"><span class="STYLE1">*</span>请输入手机号：</span>
						<input type="text" id="rcellphone" name="user.cellphone"
						class="rtextfield" onClick="hiddenTips('remindcellphone')"
						onblur="isCellphone()" title="请输入您的手机号，以确保我们能够联系到您" /> <img
						src="images/pass.png" id="cellphoneyes" /> <img
						src="images/wrong.png" id="cellphoneno" /> <span
						id="remindcellphone" class="tips">用户名已存在，请重新输入！</span></li>
					<li><br /> <br /> <a id="submitbtn" class="disable">确认</a></li>
				</ul>
			</form>
		</div>
	</div>
	<div class="wrapper col5">
		<div id="copyright">
			<p class="fl_left">
				Copyright &copy; 2012 - All Rights Reserved - <a href="#">Shanghai
					University Opensource Community</a>
			</p>
			<br class="clear" />
		</div>
	</div>
</body>
</html>